<script setup lang="ts">
import { useEcharts } from "@/hooks/useEcharts"
import * as echarts from 'echarts'

const props = withDefaults(
  defineProps<{
    width?: string,
    height?: string,
    theme?: string,
    bgColor?: string,
    title: string,
    subtitle?: string,
    data: number[], // 曲线数据
    xAxisData: string[], // x轴数据
  }>(), {
  width: '100%',
  height: '380px',
  data: () => []
})
// console.log('BarChart', props.xAxisData);

/**
 *配置项
 */
const option = {
  backgroudColor: props.bgColor,
  title: {
    text: props.title,
    subtext: props.subtitle,
    x: 'left',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: props.xAxisData
  },
  yAxis: {
    type: 'value'
  },
  toolbox: {
    feature: {
      saveAsImage: { // 下载图片
        title: '下载为图片'
      }
    }
  },
  series: [
    {
      data: props.data,
      type: 'bar',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      }
    }
  ]
}

const { chartRef } = useEcharts({ props, option })
</script>

<template>
  <el-card shadow="hover">
    <div ref="chartRef" :style="{ height: props.height, width: props.width }"></div>
  </el-card>
</template>

<style scoped lang="scss"></style>